<!--
 * @Author: C.
 * @Date: 2023-12-20 10:31:44
-->
<template>
  <PageWrapper title="今日设备" :is-index-page="true">
    <ChartWrapper
      v-for="(data, index) in dataList"
      :key="index"
      :title="data.DeviceId"
    >
      <view class="box-wrapper">
        <view
          v-for="(item, index) in headerSchema"
          :key="index"
          class="data-box"
          :style="{}"
        >
          <view class="data-box-title">
            {{ item.label }}
          </view>
          <view class="data-box-value">
            {{ data[item.field] }}
            <span class="value-unit">{{ item.unit }}</span>
          </view>
        </view>
      </view>

      <RuntimeBar style="margin-top: 20rpx" :time-list="data.SequentialDatas" />
    </ChartWrapper>
  </PageWrapper>
</template>
<script lang="ts" setup>
// ----------------------------- 第三方引入 -----------------------------
import { onMounted, ref, watch } from 'vue'

// ----------------------------- hooks -----------------------------
// ----------------------------- 组件 -----------------------------
import RuntimeBar from '../main/sub-pages/machine-detail/cpns/runtime-bar.vue'
import { headerSchema } from '../main/sub-pages/machine-detail/schema'
import { usePolling } from '@/hooks/event/usePolling'
import ChartWrapper from '@/components/chart-wrapper/index'
import PageWrapper from '@/components/page-wrapper'
// ----------------------------- 其他引入 -----------------------------
import { getAllDeviceState } from '@/api/report/deviceCollection'
import { useIndexPageProvide } from '@/hooks/web/useIndexPage'

//----------------------------- 变量声明区 -----------------------------
const dataList = ref<any[]>([])
// ----------------------------- hooks使用区 -----------------------------
// lylFanucCNC deviceId
function onLoad() {
  // onLoad
}
function onShow() {
  // onShow
  console.log('runtime onShow')
}
function onHide() {
  // onShow
  console.log('runtime onHide')
}
useIndexPageProvide('runtime', onShow, onLoad, onHide)
// ----------------------------- 钩子函数区 -----------------------------
const { flush } = usePolling(getListData)
//  ----------------------------- 自定义方法区 -----------------------------
async function getListData() {
  const data = await getAllDeviceState()
  dataList.value = data
}
onMounted(() => {
  flush()
})
</script>
<style lang="scss" scoped>
.box-wrapper {
  padding: 10rpx;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  .data-box {
    height: 100rpx;
    /* border: 1rpx solid #fff; */
    padding: 10rpx;
    margin-right: 5rpx;
    border-radius: 10rpx;
    background: #eee;
    /* box-shadow: inset 20px 20px 60px #808080, inset -20px -20px 60px #b8b8b8; */
    /* color: #fff; */
    &-title {
      font-size: 22rpx;
    }
    &-value {
      padding-top: 10rpx;
      font-size: 45rpx;
      font-weight: bold;
      .value-unit {
        font-size: 25rpx;
        font-weight: normal;
      }
    }
  }
}
</style>
